<template>
  <div>
    <!-- {{ activeCategoryIndex }} -->
    <HomeHeader />
    <van-tabs v-model="activeCategoryIndex">
      <van-tab
        :title="category.name"
        v-for="category in categoryList"
        :key="category.id"
      >
        <!-- 拿出当前分类的文章, 不能再用公共的 postList 了 -->
        <!-- 这里是我们渲染文章列表的地方 -->
        <!-- 这里我们用分页列表组件包裹这些文章 -->
        <!-- immediate-check 禁止页面进来时马上发送翻页请求 -->
        <van-list
          @load="loadMore"
          :immediate-check="false"
          v-model="category.loading"
          :finished="category.finished"
          finished-text="我是有底线的"
        >
          <PostItem
            :postData="post"
            v-for="post in category.postList"
            :key="post.id"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeHeader from "../components/HomeHeader";
import PostItem from "../components/PostItem";
export default {
  components: {
    HomeHeader,
    PostItem
  },
  data() {
    return {
      activeCategoryIndex: 0,
      categoryList: []
      // postList: []
    };
  },
  watch: {
    activeCategoryIndex(newVal) {
      // const currentCategory = this.categoryList[this.activeCategoryIndex];
      // this.$axios({
      //   url: "/post",
      //   params: {
      //     category: currentCategory.id
      //   }
      // }).then(res => {
      //   console.log(res.data);
      //   this.postList = res.data.data;
      // });
      // 切换分类会触发这个监听器
      // 本来是获取文章的, 现在我们认为
      // 既然分栏目管理文章
      // 当前栏目如果已经有文章就不需要再获取



      //由于在分类最后添加了一个加号
      //所以如果点击的是最后一个索引，就需要跳转页面
      if (newVal == this.categoryList.length - 1) {
        this.$router.push("/manage");
      } else {
        const currentCategory = this.categoryList[this.activeCategoryIndex];
        if (currentCategory.postList.length == 0) {
          this.loadPost();
        }
      }
    }
  },
  created() {
    if(localStorage.getItem('activeList')){
      //如果本地储存有数据，就在本地储存获取，
      // 但是为了和之后的逻辑对接，还是将数据构造成res.data.data
      const res = {
        data:{
          data : JSON.parse(localStorage.getItem('activeList')),
        }
      }
       this.categoryList = res.data.data.map(item => {
        return {
          ...item,
          postList: [],
          pageIndex: 1,
          pageSize: 6,
          // 这里面是初始化分类
          // 除了上面这些数据我们还要添加一个属性,储存当前分类是否正在加载
          // 如果是那么及时页面拉倒底部也不应该再发请求
          // 只要拉倒底部组件会自动将这个设为 true, 就不会重复发请求了
          loading: false,
          finished: false
        };
      });

      this.categoryList.push({
        name: "+"
      });

      // console.log(this.categoryList);
      //当前分类列表是 this.categoryList
      //当前激活分类索引是 this.activeCategoryIndex
      //当前激活分类 this.categoryList[this.activeCategoryIndex]

      // const currentCategory = this.categoryList[this.activeCategoryIndex];
      // this.$axios({
      //   url: "/post",
      //   params: {
      //     category: currentCategory.id
      //   }
      // }).then(res => {
      //   console.log(res.data);
      //   this.postList = res.data.data;
      // });
      this.loadPost();
    }else{
        this.$axios({
      url: "/category"
    }).then(res => {
      // console.log(res.data);
      // 给每个分类创建一个 postList
      // 比如第一个分类是头条,那么数据结构如下
      // {
      //     id: 999,
      //     name: '头条',
      //     postList: []
      // }
      this.categoryList = res.data.data.map(item => {
        return {
          ...item,
          postList: [],
          pageIndex: 1,
          pageSize: 6,
          // 这里面是初始化分类
          // 除了上面这些数据我们还要添加一个属性,储存当前分类是否正在加载
          // 如果是那么及时页面拉倒底部也不应该再发请求
          // 只要拉倒底部组件会自动将这个设为 true, 就不会重复发请求了
          loading: false,
          finished: false
        };
      });

      this.categoryList.push({
        name: "+"
      });

      // console.log(this.categoryList);
      //当前分类列表是 this.categoryList
      //当前激活分类索引是 this.activeCategoryIndex
      //当前激活分类 this.categoryList[this.activeCategoryIndex]

      // const currentCategory = this.categoryList[this.activeCategoryIndex];
      // this.$axios({
      //   url: "/post",
      //   params: {
      //     category: currentCategory.id
      //   }
      // }).then(res => {
      //   console.log(res.data);
      //   this.postList = res.data.data;
      // });
      this.loadPost();
    });
    }
    
  },
  methods: {
    loadMore() {
      // 这里是列表拉倒最底部会触发的函数
      // 将当前分类的页码加一然后获取数据
      const currentCategory = this.categoryList[this.activeCategoryIndex];
      currentCategory.pageIndex += 1;
      this.loadPost();
    },
    loadPost() {
      const currentCategory = this.categoryList[this.activeCategoryIndex];
      this.$axios({
        url: "/post",
        params: {
          // 根据当前激活分类的 id
          // 获取该分类的文章列表
          // 结果类似于
          // [
          //     {title:'建国同志早上好'},
          //     {title:'今天风儿很喧嚣'}
          // ]
          category: currentCategory.id,
          pageSize: currentCategory.pageSize,
          pageIndex: currentCategory.pageIndex
        }
      }).then(res => {
        // console.log(res.data);
        // this.postList = res.data.data;
        // 把文章数组放入当前激活分类

        // 因为要分页所做的修改
        // 1. 获取的数据不应该覆盖, 而是拼接
        currentCategory.postList = [
          ...currentCategory.postList,
          ...res.data.data
        ];

        // 相当于下面的写法

        // const newList = [];
        // currentCategory.postList.forEach(e => {
        //   newList.push(e);
        // });
        // res.data.data.forEach(e => {
        //   newList.push(e);
        // });
        // currentCategory.postList = newList;
        // console.log(this.categoryList);
        // 这里是请求已经发送完, 并且数据拼接成功
        // 应该告诉组件, 当前分页流程已经结束

        // 2. 加载完数据应该通知组件, 加载状态变为 false 可以继续后面的翻页了
        currentCategory.loading = false;

        // 如果数据库一直有数据, 没有问题
        // 但是如果数据库被取光了, 每次返回 0 条数据
        // 会形成死循环
        // 如果判断到当前的分类没有下一个数据了, 应该将 finished 设为 true
        // 判断服务器是否有数据的办法
        // 对比数据长度, 跟我们要求的页面 pageSize

        // 3. 每当结果长度比要求长度小, 证明页面到底, 告诉组件不能在加载下一页了
        if (res.data.data.length < currentCategory.pageSize) {
          currentCategory.finished = true;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-tab:nth-last-child(2) {
  background: #ffffff;
  position: sticky;
  right: -8px;
  width: 44px;
  line-height: 44px;
}
</style>